<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define parameters and coordinates
        const x_q = 100;
        const y_main = 120;
        const a = 150;
        const x_p = x_q + a;
        const x_m = x_p + a;
        const dot_radius = 4;
        const y_dist_line = 180;
        const font_size_latin = 22;
        const font_size_chinese = 24;
        const arrow_head_size = 10;
        const arrow_color = '#505050';

        // Helper function to draw a filled arrowhead
        function drawArrowhead(ctx, x, y, size, direction) {
            ctx.beginPath();
            if (direction === 'left') {
                ctx.moveTo(x, y);
                ctx.lineTo(x + size, y - size / 2.2);
                ctx.lineTo(x + size, y + size / 2.2);
            } else { // 'right'
                ctx.moveTo(x, y);
                ctx.lineTo(x - size, y - size / 2.2);
                ctx.lineTo(x - size, y + size / 2.2);
            }
            ctx.closePath();
            ctx.fill();
        }

        // Set default styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.fillStyle = 'black';

        // Draw main horizontal line connecting the points
        ctx.beginPath();
        ctx.moveTo(x_q, y_main);
        ctx.lineTo(x_m, y_main);
        ctx.stroke();

        // Draw the points
        ctx.beginPath();
        ctx.arc(x_q, y_main, dot_radius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(x_p, y_main, dot_radius, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(x_m, y_main, dot_radius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw labels for the points
        ctx.font = `italic ${font_size_latin}px 'Times New Roman'`;
        ctx.textAlign = 'center';
        ctx.fillText('+q', x_q, y_main - 15);
        ctx.fillText('P', x_p, y_main - 15);
        ctx.fillText('M', x_m, y_main - 15);

        // --- Draw Distance Markers ---
        ctx.lineWidth = 1;

        // Draw vertical lines from points to the distance marker line
        ctx.beginPath();
        ctx.moveTo(x_q, y_main);
        ctx.lineTo(x_q, y_dist_line);
        ctx.moveTo(x_p, y_main);
        ctx.lineTo(x_p, y_dist_line);
        ctx.moveTo(x_m, y_main);
        ctx.lineTo(x_m, y_dist_line);
        ctx.stroke();

        // Draw the first distance segment (+q to P)
        ctx.beginPath();
        ctx.moveTo(x_q, y_dist_line);
        ctx.lineTo(x_p, y_dist_line);
        ctx.stroke();
        
        ctx.fillStyle = arrow_color;
        drawArrowhead(ctx, x_q, y_dist_line, arrow_head_size, 'left');
        drawArrowhead(ctx, x_p, y_dist_line, arrow_head_size, 'right');

        // Draw the second distance segment (P to M)
        ctx.beginPath();
        ctx.moveTo(x_p, y_dist_line);
        ctx.lineTo(x_m, y_dist_line);
        ctx.stroke();

        ctx.fillStyle = arrow_color;
        drawArrowhead(ctx, x_p, y_dist_line, arrow_head_size, 'left');
        drawArrowhead(ctx, x_m, y_dist_line, arrow_head_size, 'right');

        // Draw distance labels 'a'
        ctx.fillStyle = 'black';
        ctx.font = `italic ${font_size_latin - 2}px 'Times New Roman'`;
        ctx.fillText('a', x_q + a / 2, y_dist_line - 10);
        ctx.fillText('a', x_p + a / 2, y_dist_line - 10);

        // Draw the bottom text "题 3 图" (Question 3 Figure)
        ctx.font = `${font_size_chinese}px 'KaiTi', 'SimSun'`;
        ctx.fillText('题 3 图', x_p, y_dist_line + 60);

    </script>
</body>
</html>